<template>
    <div class="index animated fadeIn" >
        <div class="container">
            <div class="balloon">
               <div><span>我</span>
                </div>
                <div><span>们</span>
                </div>
                <div><span>结</span>
                </div>
                <div><span>婚</span>
                </div>
                <div><span>啦</span>
                </div>
                <div><span>!</span>
                </div>
            </div>
        </div>
        <div class="bg-swiper">
            <index-swiper :list="list"></index-swiper>
        </div>
        <image class="inv" src="../../static/images/inv.png"/>
        <div class="bg_music" v-if="isPlay" @tap="audioPlay">
            <image src="../../static/images/music_icon.png" class="musicImg music_icon"/>
            <image src="../../static/images/music_play.png" class="music_play pauseImg"/>
        </div>
        <div class="bg_music" v-else @tap="audioPlay">
            <image src="../../static/images/music_icon.png" class="musicImg"/>
            <image src="../../static/images/music_play.png" class="music_play playImg"/>
        </div>
        <div class="info" :animation="animationData">
            <div class="content" :class="hidden?'hidden1':''"> 
                <h1>Mr.徐良俊& Miss.王燕秋</h1>
                <p>谨定于 2020年3月1日 （星期六）</p>
                <p>室外婚礼于2点18分</p>
                <p>室内婚礼于6点18分</p>
                <p>席设：江苏省南京市六合区西郊农庄</p>
                <!-- <image src="http://dlhtx.zicp.vip:3000/wx/wxImg/155.jpg" class="img_footer"/> -->
            </div>
            <button class="left want" :class="!hidden?'hidden':''"  lang="zh_CN" open-type="getUserInfo" style="position:fixed;top:117%;width:630rpx;background:white;left:5-rpx;color:#333;">我要出席</button>
            <button class="left"  :class="hidden?'hidden':''"  lang="zh_CN" open-type="getUserInfo" @getuserinfo="sendGreet" style="position:fixed;top:150%;width:630rpx;background:white;left:5-rpx;color:#333;">进入首页</button>
        </div>

		
        <audio id="myAudio" :src="audioUrl" autoplay loop></audio>
    </div>
</template>

<script>
import IndexSwiper from 'components/indexSwiper'
import tools from 'common/js/h_tools'
export default {
  name: 'Index',
  components: {
    IndexSwiper
  },
  data () {
    return {
        isPlay: true,
        list: ['http://dlhtx.zicp.vip:3000/wx/wxImg/155.jpg','http://dlhtx.zicp.vip:3000/wx/wxImg/117-1.jpg','http://dlhtx.zicp.vip:3000/wx/wxImg/194-1.jpg'],
        audioIndex: 0,
        audioUrl: [],
        userInfo:'',
        hidden:false,
        innerAudioContext:wx.createInnerAudioContext(),
        BackgroundAudioManager:''
    }
  },
  onLoad(){
    const that = this
    wx.hideTabBar({})
    that.check()
    that.getMusic()
  },
  onShow () {
    const that = this
  },
  created () {
  },

  methods: {
    audioPlay(){
        console.log('按下按钮')
        if(this.isPlay){
            this.isPlay = false
            this.BackgroundAudioManager.pause()
        }else{
            this.isPlay = true
            this.BackgroundAudioManager.play()
        }
    },
    async getMusic(){
        let res = await wx.cloud.callFunction({name: 'getMusic'})
        let ret = JSON.parse(res.result)
        this.audioUrl = ret.data
        console.log(ret,this.audioUrl)
        this.BackgroundAudioManager = wx.getBackgroundAudioManager()
        this.playMusic(this.audioIndex)
    },
    playMusic(audioIndex){
        console.log(this.audioUrl)
        this.BackgroundAudioManager.src = this.audioUrl[audioIndex].url
        this.BackgroundAudioManager.title = this.audioUrl[audioIndex].name
        this.BackgroundAudioManager.singer = '周杰伦'
        // wx.playBackgroundAudio({
        //     dataUrl:this.audioUrl[audioIndex].url,
        //     title:this.audioUrl[audioIndex].name,
        // })
        this.checkPlayState()
    },
    checkPlayState(){ //检查背景音乐播放状态
        //this.BackgroundAudioManager =  wx.getBackgroundAudioManager()
        this.BackgroundAudioManager.onPlay(()=>{
            console.log('背景音乐正在播放')
            this.isPlay = true
        })
        this.BackgroundAudioManager.onPause(()=>{
            console.log('背景音乐暂停播放')
            this.isPlay = false
        })
        this.BackgroundAudioManager.onError(()=>{
            console.log('背景音乐播放错误')
            var that = this
            wx.showModal({
                title: '提示',
                content: '检测到背景音乐被后台杀死,是否重新播放?',
                success(res) {
                    if (res.confirm) {
                        that.playMusic(that.audioIndex)
                        console.log('用户点击确定')
                    } else if (res.cancel) {
                        console.log('用户点击取消')
                    }
                }
            })
            this.isPlay = false
        })
        this.BackgroundAudioManager.onStop(()=>{
            console.log('背景音乐播放停止')
            var that = this
            wx.showModal({
                title: '提示',
                content: '检测到背景音乐停止播放,是否重新播放?',
                success(res) {
                    if (res.confirm) {
                        that.playMusic(that.audioIndex)
                        console.log('用户点击确定')
                    } else if (res.cancel) {
                        console.log('用户点击取消')
                    }
                }
            })
            this.isPlay = false
        })
        this.BackgroundAudioManager.onEnded(()=>{
            console.log('背景音乐自然结束播放')
            if(this.audioIndex == this.audioIndex.length){
                console.log(this.audioUrl)
                this.audioIndex == 0
                this.playMusic(this.audioIndex)
            }else{
                this.audioIndex++
                this.playMusic(this.audioIndex)
            }
        })
    },
    check(){
        const that = this
        wx.getStorage({
            key: 'can_getuserinfo',
            success: function (res) { 
                if(res.data=='yes'){
                    //console.log(res.data,'本地local存在用户信息');
                    that.hidden=true
                    wx.showTabBar({})
                }else{
                    //console.log(res.data,'本地local没有用户信息);
                    that.hidden=false
                    wx.hideTabBar({})
                }
                // that.hidden=true
            }
        })
    },
    sendGreet (e) {
      const that = this
      if (e.target.errMsg === 'getUserInfo:ok') {
        wx.getUserInfo({
          success: function (res) {
            that.userInfo = res.userInfo
            wx.showTabBar({})
            that.hidden = true
            wx.setStorage({
                key: 'can_getuserinfo',
                data:'yes',
            })
          }
        })
      }else{
            wx.setStorage({
                key: 'can_getuserinfo',
                data: 'no',
            })
      }
    },

    getList () {
      const that = this
      const db = wx.cloud.database()
      const banner = db.collection('banner')
      banner.get().then(res => {
        that.list = res.data[0].bannerList
        console.log(that.list)
      })
    },
  },
  onPullDownRefresh () {
    wx.stopPullDownRefresh();
    console.log('下拉')
  },
  // 上拉加载，拉到底部触发
  onReachBottom() {
    console.log('上啦')
  },
  onShareAppMessage: function (res) {
    return {
      path: '/pages/index/main',
      title:'俊和秋的请柬'
    }
  },


}
</script>
<style>
    .hidden{
        opacity: 0;
        transition: all .3s;
    }
    .hidden1{
        bottom:35%!important;
        transition: all .8s;
    }
    .content{
        /* background:linear-gradient(135deg, #6e8ffb, #3bff9a)!important; */
        color:white;
        border:1rpx solid #000;
        border-radius:7px;
        border:none!important;
    }
</style>
<style>
    .want{
        /* background: linear-gradient(135deg, #6e8ffbd3, #c8fbe1)!important; */
        color:white!important;
    }
    button::after{
        border:none;
    }
    span {
        text-transform: uppercase;
    }
    .container {
        height: 420px;
        padding: 10px;
        margin: 0 auto;
        position:absolute;
        top:0;
        left:0;
        z-index:999;
    }
    .balloon {
        width:1476rpx;
        padding-top:60rpx;
        position:absolute;
        transform:scale(.5);
        top:0;
        left:-950%;
    }
    .balloon > div {
        width: 104px;
        height: 140px;
        background: rgba(182, 15, 97, 0.5);
        border-radius: 0;
        border-radius: 80% 80% 80% 80%;
        margin: 0 auto;
        position: absolute;
        padding: 10px;
        /* box-shadow: inset 17px 7px 10px rgba(255, 255, 255, 0.5); */
        -webkit-transform-origin: bottom center;
    }
    .balloon > div:nth-child(1) {
        background:linear-gradient(135deg, rgba(251,0,0,0.51), rgba(251,0,0,0.2));
        /* background: rgba(182, 15, 97, 0.5); */
        left: 0;
        /* box-shadow: inset 10px 10px 10px rgba(135, 11, 72, 0.5); */
        -webkit-animation: balloon1 6s ease-in-out infinite;
        -moz-animation: balloon1 6s ease-in-out infinite;
        -o-animation: balloon1 6s ease-in-out infinite;
        animation: balloon1 6s ease-in-out infinite;
    }
    .balloon > div::after{
        width: 15px;
        height: 15px;
        background: white;
        position: absolute;
        top: 15%;
        left:20%;
        display: block;
        border-radius: 50%;
        content:'';
    }


    .balloon > div:nth-child(1):before {
        color: rgba(182, 15, 97, 0.5);
    }
    .balloon > div:nth-child(2) {
        background:linear-gradient(135deg, rgba(251,226,0,0.51), rgba(188,250,234,0.3));
        /* background: rgba(242, 112, 45, 0.5); */
        left: 120px;
        /* box-shadow: inset 10px 10px 10px rgba(222, 85, 14, 0.5); */
        -webkit-animation: balloon2 6s ease-in-out infinite;
        -moz-animation: balloon2 6s ease-in-out infinite;
        -o-animation: balloon2 6s ease-in-out infinite;
        animation: balloon2 6s ease-in-out infinite;
    }
    .balloon > div:nth-child(2):before {
        color: rgba(242, 112, 45, 0.5);
    }
    .balloon > div:nth-child(3) {
        background:linear-gradient(135deg, rgba(0,251,134,0.5), rgba(188,250,234,0.3));
        /* background: rgba(44, 179, 165, 0.5); */
        left: 240px;
        /* box-shadow: inset 10px 10px 10px rgba(35, 140, 129, 0.5); */
        -webkit-animation: balloon4 6s ease-in-out infinite;
        -moz-animation: balloon4 6s ease-in-out infinite;
        -o-animation: balloon4 6s ease-in-out infinite;
        animation: balloon4 6s ease-in-out infinite;
    }
    .balloon > div:nth-child(3):before {
        color: rgba(45, 181, 167, 0.5);
    }
    .balloon > div:nth-child(4) {
        background:linear-gradient(135deg, rgba(171,0,251,0.5), rgba(230,188,250,0.3));
        /* background: rgba(190, 61, 244, 0.5); */
        left: 360px;
        /* box-shadow: inset 10px 10px 10px rgba(173, 14, 240, 0.5); */
        -webkit-animation: balloon1 5s ease-in-out infinite;
        -moz-animation: balloon1 5s ease-in-out infinite;
        -o-animation: balloon1 5s ease-in-out infinite;
        animation: balloon1 5s ease-in-out infinite;
    }
    .balloon > div:nth-child(4):before {
        color: rgba(190, 61, 244, 0.5);
    }
    .balloon > div:nth-child(5) {
        background:linear-gradient(135deg, rgba(251,0,197,0.5), rgba(250,188,247,0.3));
        /* background:linear-gradient(135deg, #fb00c581, #fabcf76e); */
        /* background: rgba(180, 224, 67, 0.5); */
        left: 480px;
        /* box-shadow: inset 10px 10px 10px rgba(158, 206, 34, 0.5); */
        -webkit-animation: balloon3 5s ease-in-out infinite;
        -moz-animation: balloon3 5s ease-in-out infinite;
        -o-animation: balloon3 5s ease-in-out infinite;
        animation: balloon3 5s ease-in-out infinite;
    }
    .balloon > div:nth-child(5):before {
        color: rgba(180, 224, 67, 0.5);
    }
    .balloon > div:nth-child(6) {
        background:linear-gradient(135deg, rgba(251,226,0,0.5), rgba(250,241,188,0.3));
        /* background:linear-gradient(135deg, #fbe20081, #faf1bc6e); */
        /* background: rgba(242, 194, 58, 0.5); */
        left: 600px;
        /* box-shadow: inset 10px 10px 10px rgba(234, 177, 15, 0.5); */
        -webkit-animation: balloon2 3s ease-in-out infinite;
        -moz-animation: balloon2 3s ease-in-out infinite;
        -o-animation: balloon2 3s ease-in-out infinite;
        animation: balloon2 3s ease-in-out infinite;
    }
    .balloon > div:nth-child(6):before {
        color: rgba(242, 194, 58, 0.5);
    }
    .balloon > div:before {
        color: rgba(182, 15, 97, 0.5);
        position: absolute;
        bottom: -11px;
        left: 52px;
        content:"▲";
        font-size: 1em;
    }
    span {
        font-size: 3.8em;
        color: white;
        position: relative;
        top: 30px;
        left: 50%;
        margin-left: -27px;
    }
    /*BALLOON 1 4*/
    @keyframes balloon1 {
        0%, 100% {
            transform: translateY(0) rotate(-6deg);
        }
        50% {
            transform: translateY(-20px) rotate(8deg);
        }
    }
    /* BAllOON 2 5*/
    @keyframes balloon2 {
        0%, 100% {
            transform: translateY(0) rotate(6deg);
        }
        50% {
            transform: translateY(-30px) rotate(-8deg);
        }
    }
    /* BAllOON 0*/
    @keyframes balloon3 {
        0%, 100% {
            transform: translate(0, -10px) rotate(6eg);
        }
        50% {
            transform: translate(-20px, 30px) rotate(-8deg);
        }
    }
    /* BAllOON 3*/
    @keyframes balloon4 {
        0%, 100% {
            transform: translate(10px, -10px) rotate(-8eg);
        }
        50% {
            transform: translate(-15px, 10px) rotate(10deg);
        }
    }
</style>
<style scoped lang="stylus">
@-webkit-keyframes musicRotate
  from
    -webkit-transformb rotate(0deg)
  to
    -webkit-transform rotate(360deg)
@-webkit-keyframes musicStop
  from
    -webkit-transform rotate(20deg)
  to
    -webkit-transform rotate(0deg)
@-webkit-keyframes musicStart
  from
    -webkit-transform rotate(0deg)
  to
    -webkit-transform rotate(20deg)
@-webkit-keyframes infoAnimation
  0%
    -webkit-transform scale(1) translate(0, 0)
  50%
    -webkit-transform scale(.9) translate(5px, 5px)
  100%
    -webkit-transform scale(1) translate(0, 0)
.index
  height 100%
  position relative
  .img
    width 100%
    height 100%
  .bg-swiper
    width 100%
    height 100%
  .inv
    position absolute
    top 20rpx
    left 89rpx
    width 572rpx
    height 69rpx
    z-index 9
  .bg_music
    position fixed
    right 0
    top 20rpx
    width 100rpx
    z-index 999
    display flex
    justify-content flex-start
    align-items flex-start
    .musicImg
      width 60rpx
      height 60rpx
    .music_icon
      animation musicRotate 3s linear infinite
    .music_play
      width 28rpx
      height 60rpx
      margin-left -10rpx
      transform-origin top
      -webkit-transform rotate(20deg)
    .playImg
      animation musicStop 1s linear forwards
    .pauseImg
      animation musicStart 1s linear forwards
  .info
    width 630rpx
    background rgba(255,255,255,0.55) 
    z-index 9
    position fixed
    bottom 42%
    left 50rpx
    padding 10rpx
    animation infoAnimation 12s linear infinite
    border-radius 5px
    .content
      width 626rpx
      border 1rpx solid #000
      display flex
      flex-direction column
      justify-content flex-start
      align-items center
      position relative
      padding-bottom 30rpx
      h1
        font-size 50rpx
        height 100rpx
        line-height 100rpx
      p
        font-size 34rpx
        height 60rpx
        line-height 60rpx
      .img_footer
        position absolute
        bottom 0
        left 53rpx
        z-index 99
        height 14rpx
        width 520rpx
  #myAudio
    display none
</style>
